<template>
    <div>
      <h4>1、vue文件方法声明顺序</h4>
      <el-card>
       <img src="../../assets/img/standard.png"/>
      </el-card>

      <h4>2、vue文件方法声明顺序</h4>
      <el-card>
        Components、props、data、created、mounted、activited、update、
        beforeRouteUpdate、method、filter、computed、watch
      </el-card>

      <h4>3、组件引入规范</h4>
      <el-card>
        <code>
              如果在build/webpack.base.config.js中设置
          <br>resolve: {
          <br>&nbsp;&nbsp;extensions: ['*', '.js', '.json', '.vue'],
          <br>&nbsp;&nbsp;alias: {
          <br>&nbsp;&nbsp;&nbsp;&nbsp;'vue$': 'vue/dist/vue.esm.js',
          <br>&nbsp;&nbsp;&nbsp;&nbsp;'@': path.resolve(__dirname, '../src'),
          <br>&nbsp;&nbsp;}
          <br>};
          <br>设置了@后，引用方式统一为：import NowTime from "@/components/public/esTime.vue"
          <br><span style="color:deepskyblue;font-size: 18px;">&lt;es-time>&lt;/es-time></span>
        </code>
      </el-card>

      <h4>4、组件传值</h4>
      <el-card>
        <code>
          <span style="color:deepskyblue;font-size: 18px;">命名应该始终使用驼峰命名 (camelCase)</span>
          <br>props: {
          <br>&nbsp;&nbsp;&nbsp;&nbsp;// 多个可能的类型
          <br>&nbsp;&nbsp;propB: {
          <br>&nbsp;&nbsp;&nbsp;&nbsp;type:[String, Number],
          <br>&nbsp;&nbsp;&nbsp;&nbsp;required:true
          <br>&nbsp;&nbsp;},
          <br>&nbsp;&nbsp;// 必填的字符串
          <br>&nbsp;&nbsp;propC: {
          <br>&nbsp;&nbsp;&nbsp;&nbsp;type: String,
          <br>&nbsp;&nbsp;&nbsp;&nbsp;required: true
          <br>&nbsp;&nbsp;},
          <br>&nbsp;&nbsp;// 带有默认值的数字
          <br>&nbsp;&nbsp;propD: {
          <br>&nbsp;&nbsp;&nbsp;&nbsp;type: Number,
          <br>&nbsp;&nbsp;&nbsp;&nbsp;default: 100
          <br>&nbsp;&nbsp;},
          <br>&nbsp;&nbsp;// 带有默认值的对象
          <br>&nbsp;&nbsp;propE: {
          <br>&nbsp;&nbsp;&nbsp;&nbsp;type: Object,
          <br>&nbsp;&nbsp;&nbsp;&nbsp;// 对象或数组默认值必须从一个工厂函数获取
          <br>&nbsp;&nbsp;&nbsp;&nbsp;default: function () {
          <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/return { message: 'hello' }
          <br>&nbsp;&nbsp;&nbsp;&nbsp;}
          <br>&nbsp;&nbsp;},
          <br>&nbsp;&nbsp;// 自定义验证函数
          <br>&nbsp;&nbsp;propF: {
          <br>&nbsp;&nbsp;&nbsp;&nbsp;validator: function (value) {
          <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// 这个值必须匹配下列字符串中的一个
          <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return ['success', 'warning', 'danger'].indexOf(value) !== -1
          <br>&nbsp;&nbsp;&nbsp;&nbsp;}
          <br>&nbsp;&nbsp;}
          <br>}
        </code>
      </el-card>

      <h4>5、注释规范</h4>
      <el-card>
        <br>1.公共组件使用说明，应包含：
        <br>&nbsp;&nbsp;&nbsp;&nbsp;/**
        <br>&nbsp;&nbsp;&nbsp;&nbsp;* 组件名称
        <br>&nbsp;&nbsp;&nbsp;&nbsp;* @module 组件存放位置
        <br>&nbsp;&nbsp;&nbsp;&nbsp;* @desc 组件描述
        <br>&nbsp;&nbsp;&nbsp;&nbsp;* @author 组件作者
        <br>&nbsp;&nbsp;&nbsp;&nbsp;* @date 2017年12月05日17:22:43
        <br>&nbsp;&nbsp;&nbsp;&nbsp;* @param {Object} [title]    - 参数说明
        <br>&nbsp;&nbsp;&nbsp;&nbsp;* @param {String} [columns] - 参数说明
        <br>&nbsp;&nbsp;&nbsp;&nbsp;* @example 调用示例
        <br>&nbsp;&nbsp;&nbsp;&nbsp;*  &lt;es-time :time="time"  :default-now>&lt;/es-time>
        <br>&nbsp;&nbsp;&nbsp;&nbsp;    */
        <br>2.各组件中重要函数或者类说明
        <br>3.复杂的业务逻辑处理说明
        <br>4.特殊情况的代码处理说明,对于代码中特殊用途的变量、存在临界值、函数中使用的hack、使用了某种算法或思路等需要进行注释描述
        <br>5.注释块必须以/**（至少两个星号）开头**/；
        <br>6.单行注释使用//；
      </el-card>

      <h4>6、编码规范</h4>
      <el-card>
            1.使用ES6风格编码源码
        <br>&nbsp;&nbsp;&nbsp;&nbsp;定义变量使用let ,定义常量使用const
        <br>&nbsp;&nbsp;&nbsp;&nbsp;使用export ，import 模块化
        <br>2.组件 props 原子化
        <br>&nbsp;&nbsp;&nbsp;&nbsp;提供默认值
        <br>&nbsp;&nbsp;&nbsp;&nbsp;使用 type 属性校验类型
        <br>&nbsp;&nbsp;&nbsp;&nbsp;使用 props 之前先检查该 prop 是否存在
        <br>3.避免 this.$parent
        <br>4.谨慎使用 this.$refs
        <br>5.无需将 this 赋值给 component 变量
        <br>6.调试信息console.log() debugger 使用完及时删除
      </el-card>

      <h4>7、组件命名规范</h4>
      <el-card>
            1. 有意义的名词、简短、具有可读性
        <br>2. 以小写开头，采用短横线分割命名
        <br>3. 公共组件命名以主要实现的功能为命名空间
        <br>4. 文件夹命名主要以功能模块代表命名
      </el-card>

      <h4>8、Css规范</h4>
      <el-card>
            1.命名规则
        <br>&nbsp;&nbsp;&nbsp;&nbsp;使用类选择器，放弃ID选择器
        <br>&nbsp;&nbsp;&nbsp;&nbsp;NEC特殊字符："-"连字符
        <br>&nbsp;&nbsp;&nbsp;&nbsp;分类的命名方法：使用单个字母+"-"为前缀
        <br>&nbsp;&nbsp;&nbsp;&nbsp;命名应简约而不失语义
        <br>2.代码格式
        <br>&nbsp;&nbsp;&nbsp;&nbsp;选择器、属性和值都使用小写
        <br>&nbsp;&nbsp;&nbsp;&nbsp;单行写完一个选择器定义
        <br>&nbsp;&nbsp;&nbsp;&nbsp;最后一个值也以分号结尾
        <br>&nbsp;&nbsp;&nbsp;&nbsp;省略值为0时的单位
        <br>&nbsp;&nbsp;&nbsp;&nbsp;使用单引号
        <br>&nbsp;&nbsp;&nbsp;&nbsp;根据属性的重要性按顺序书写
        <br>&nbsp;&nbsp;&nbsp;&nbsp;注释格式：/* 注释文字 */
        <br>&nbsp;&nbsp;&nbsp;&nbsp;选择器顺序
        <br>&nbsp;&nbsp;&nbsp;&nbsp;请综合考虑以下顺序依据：
        <br>&nbsp;&nbsp;&nbsp;&nbsp;从大到小（以选择器的范围为准）
        <br>&nbsp;&nbsp;&nbsp;&nbsp;从低到高（以等级上的高低为准）
        <br>&nbsp;&nbsp;&nbsp;&nbsp;从先到后（以结构上的先后为准）
        <br>&nbsp;&nbsp;&nbsp;&nbsp;从父到子（以结构上的嵌套为准）
      </el-card>
      <h4>9.未完待续...</h4>
      <el-card>
        <h4>...</h4>
      </el-card>

    </div>
</template>

<script>
  export default {
    name: 'standard'
  }
</script>

<style scoped>
  code{
    font-size: 16px;
  }
</style>
